<template>
  <div class="fullScreen">
    <span :class="['iconfont', toggleIcon]" @click="fullScreen"></span>
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'fullScreen',
  data() {
    return {
      toggleIcon: 'hr-quanping'
    }
  },
  methods: {
    fullScreen() {
      if (!screenfull.isEnabled) {
        return this.$message.error('对不起,全屏不可用')
      }
      screenfull.toggle()

      this.toggleIcon = !screenfull.isFullscreen
        ? 'hr-tuichuquanping'
        : 'hr-quanping'
    }
  }
}
</script>

<style lang="scss" scoped>
.fullScreen {
  .iconfont {
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
